<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        .shadow{
            background-color: rgba(0,0,0,0.7); /* rgba可以设置透明度,0-1之间的数字 */
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 90;

        }


        .mode{
            width: 440px;
            height: 480px;
            background-color: white;
            position:fixed;
            top:50%;
            left: 50%;
            z-index: 100;
            margin-left: -220px;
            margin-top: -240px;

        }

        .mode h2,.mode h3{
            text-align: center;
        }
        .xxx{
            text-align: right;
        }
        .xxx span{

        }
        .xxx span:hover{
            cursor: pointer;
        }

        .hide{
            display: none;
        }
    </style>

</head>
<body>
<h1>24期皇家spa会所</h1>

<div>金牌技师李业和陈硕,30年捏脚经验,技师一流,服务到位,倒贴200 <button id="btn">会员登录</button></div>


<div>
    30年捏脚经验,技师一流,服务到位

    <img src="cs.png" alt="" width="400" height="400">
</div>

<div class="mode hide">
    <div class="xxx">
        <span id="cancle">x</span>
    </div>
    <h2>不正经的24期会所入口</h2>
    <h3>会员登录</h3>
    <div class="iii">
        <div>
            <label>
                用户名:<input type="text">
            </label>
        </div>

        <div>
            <label>
                密码:<input type="text">
            </label>
        </div>

    </div>
</div>  <!-- 对话框白框 -->

<div class="shadow hide"></div>  <!-- 黑色阴影遮罩层 -->


<script src="jquery.js"></script>
<script>
    // 绑定事件的方法
    $('#btn').click(function () {
        // $('.mode')[0].classList.remove('hide');
        // $('.shadow')[0].classList.remove('hide');
        // $('.mode').removeClass('hide');
        // $('.shadow').removeClass('hide');

        $('.mode,.shadow').removeClass('hide');

    })

    $('#cancle').click(function () {
        // $('.mode')[0].classList.add('hide');
        // $('.shadow')[0].classList.add('hide');
        $('.mode,.shadow').addClass('hide');
    })

</script>

</body>
</html>